<template>
  <div class="app-container">
    <el-card>
      <el-form v-loading="infoLoad">
        <el-row>
          <el-col :span="24">
            <el-form-item label="岗位标题:" prop="title">
              {{ jobInfo.title }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="岗位名称:" prop="name">
              {{ jobInfo.name }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行业类型:" prop="type">
              <DictLabel v-model="jobInfo.type" code="JOB_TYPE" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="薪资范围:" prop="hourlyWage">
              {{ jobInfo.hourlyWage }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="结算方式:" prop="settlement">
              <DictLabel v-model="jobInfo.settlement" code="SETTLEMENT" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学历要求:" prop="educational">
              <DictLabel v-model="jobInfo.educational" code="EDUCATIONAL" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="岗位描述:" prop="description">
              <QuillViewer v-model="jobInfo.description" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="工作时间:" prop="workTime">
              {{ jobInfo.workTime }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工作时段:" prop="workHours">
              {{ jobInfo.workHours }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="工作要求:" prop="jobRequirements">
              <QuillViewer v-model="jobInfo.jobRequirements" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="工作地点:" prop="workLocation">
              {{ jobInfo.workLocation }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="福利待遇:" prop="welfare">
              {{ jobInfo.welfare }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-if="jobInfo.publishTime" :span="6">
            <el-form-item label="发布时间:" prop="welfare">
              {{ jobInfo.publishTime }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import JobApi, { JobVO } from "@/api/job/job.api";

defineOptions({
  name: "Application",
  inheritAttrs: false,
});

const jobId = ref();
const infoLoad = ref(false);

const jobInfo = reactive<JobVO>({});

// 查询
function handleQuery() {
  infoLoad.value = true;
  JobApi.getById(jobId.value)
    .then((data) => {
      Object.assign(jobInfo, data);
    })
    .finally(() => {
      infoLoad.value = false;
    });
}

onMounted(() => {
  handleQuery();
});
</script>

<style lang="scss" scoped></style>
